<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1 {width: 100px; height: 100px;background-color: #45dfff;}
		#div2 {width: 100px; height: 100px;background-color: black;}
	</style>
	<script src="jquery-1.10.1.min.js"></script>
	<script type="text/javascript">
/*	$()下的常用方法
		hover(fn1, fn2): 鼠标移入fn1和鼠标移出fn2效果（包含两个函数）

		show()：显示。加了时间参数，就变成动态显示
		hide(): 隐藏。加了时间参数，就变成动态隐藏
		toggle() : 显示/隐藏切换
		同时，括号内可以接收一个(时间)参数--毫秒，和一个回调函数。可以完成运动

		fadeIn(): 淡入
		fadeOut():淡出
		fadeToggle() :淡入/淡出切换
		同样，括号内也可以接收一个(时间)参数--毫秒(默认400)，和一个回调函数。可以完成淡入淡出效果(透明度从100到0)

		fadeTo(毫秒，小数值透明度) ： 指定用时和目标透明度

		slideUp():卷起
		slideDown():放下
		slideToggle():卷起/放下切换
		同样，括号内也可以接收一个(时间)参数--毫秒(默认400)，和一个回调函数。可以完成卷起放下运动
*/
	$(function () {
		$('#div1').hover(function(){
			// $(this).css('background-color', 'red');

			// $('#div2').hide();

			// $('#div2').fadeOut(1000);

			// $('#div2').fadeTo(1000,0.1);

			// $('#div2').slideUp(1000);

			// $('#div2').slideToggle(1000);
		},function(){
			// $(this).css('background-color', '#45dfff');

			// $('#div2').show();

			// $('#div2').fadeIn();

			// $('#div2').fadeTo(1000,1);

			// $('#div2').slideDown();

			// $('#div2').slideToggle();
		})
	})
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>